<template>
<div>
  
  <el-badge :value="user_auditing.length" class="item">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      
      消息
    </el-button>
  </el-badge>

  <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    :with-header="false">
    <span>
      <el-card class="box-card"  v-for="(item,index) in user_auditing" :key='index'>
      <div slot="header" class="clearfix" v-show="item.id_auditing==0">
        <span>用户：{{ item.username }} 申请通过</span>
        <el-button style="float: right; padding: 3px 0" type="text"  @click="add_user(item.id)" >同意</el-button>
      </div>
      </el-card>
    </span>
  </el-drawer>

  <div v-show="type==0">
      <el-table
        :data="user_ok"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="username"
          label="用户名"
          width="300">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="350">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="300">
        </el-table-column>
        <el-table-column
          prop="type_id"
          label="权限"
          width="170">
        </el-table-column>
        <el-table-column
          prop="date_joined"
          label="创建时间"
          width="300">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogFormVisible_put(scope.row.id)"  >编辑</el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small" @click="user_del(scope.row.id)">存档</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-select v-model="form.type_id" placeholder="请选择权限">
            <el-option label="发货" value="1"></el-option>
            <el-option label="收获" value="2"></el-option>
            <el-option label="收获 + 发货" value="3"></el-option>
            <el-option label="客服" value="4"></el-option>
          </el-select>
        </el-form-item>
        
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="put_user">确 定</el-button>
        </div>
      </el-dialog>
  </div>


  <div v-show="type != 0">
    <el-table
        :data="my_user"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="username"
          label="用户名"
          width="300">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="350">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="300">
        </el-table-column>
        <el-table-column
          prop="type_id"
          label="权限"
          width="170">
        </el-table-column>
        <el-table-column
          prop="date_joined"
          label="创建时间"
          width="300">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogFormVisible_put(scope.row.id)"  >编辑</el-button>
            
          </template>
        </el-table-column>
      </el-table>
  </div>

</div>
</template>

<script>
import { Register_GET,Register_PUT,Types } from '../../api/api.js'

  export default {
   

    data() {
      return {
        drawer: false,

        //所有用户信息
        user_list:[],
        // 没有审核的用户
        user_auditing:[],
        // 审核通过的用户
        user_ok:[],


        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          username: '',
          type_id: '',
          email: '',
          phone: '',
          uid:'',
          // delivery: false,
          // type: [],
          // resource: '',
          // desc: ''
        },
        formLabelWidth: '120px',

        //当前用户权限
        type:'', 
        
        // 当前用户列表
        my_user:[],

        // 当前用户id
        user_id:'',

      }
    },

    created() {
      this.type = localStorage.getItem('type_id')
      this.user_id = localStorage.getItem('uid')

    },

    mounted:function(){
      this.get_users()

      
      
    },
    methods: {

      // 编辑的按钮为ture并保存uid
      dialogFormVisible_put(uid){
        this.dialogFormVisible = true
        this.form.uid = uid
        // console.log(this.form.uid)
      },
      
      //修改用户
      put_user(){
          Register_PUT(this.form).then(res=>{
            console.log(res)
            if(res.code==200){
              alert(res.message)
              this.$router.go(0)
            }
          })
          
      },


      handleClick(row) {
        console.log(row);
      },

      // 获取所有用户
      get_users(){
          Register_GET({com_id:localStorage.getItem('com_id')}).then(res=>{
            // console.log(res)
            // 把没有审核的用户添加到新的数组 
            for(let i=0,l=res.data.length;i<l;i++){
              if(res.data[i].id_auditing==0){
                // console.log(res.data[i])
                this.user_auditing.push(res.data[i])
              }
              // 审核通过没有删除的用户
              else{
                if(res.data[i].id_del==0){
                  this.user_ok.push(res.data[i])
                }

                if(res.data[i].id==this.user_id){
                  this.my_user.push(res.data[i])
                }
                
              }

              

            }
          })
      },
      // 用户通过审核
      add_user(uid){
        Register_PUT({uid:uid,id_auditing:1}).then(res=>{
          // console.log(res)
          if(res.code==200){
            alert(res.message)
            this.$router.go(0)
          }
        })
      },

      // 用户归档
      user_del(uid){
        // console.log(uid)
        Register_PUT({uid:uid,id_del:1}).then(res=>{
          // console.log(res)
          alert(res.message)
          this.$router.go(0)
        })
      },

    },
  }
</script>